<template>
  <div>
    <Searchbar>
<!--      <p class="page-title">实验管理 > 环境管理</p>-->
      <div class="tabs">
          <div class="active-tab">内置镜像</div>
          <div @click="go('/my/images')" >自定义镜像</div>
          <div @click="go('/my/instances')">虚拟机列表</div>
      </div>
      <div>
        <el-input style="margin-right: 10px; margin-top: 10px" @change="getList" class="long-input" v-model="search.image_name" placeholder="请输入镜像名称"></el-input>
        <el-button @click="getList" type="primary">查询</el-button>
        <el-button class="search-btn" @click="asyncImage" type="primary" icon="el-icon-refresh">同步</el-button>
      </div>
    </Searchbar>
    <table cellspacing="0" cellpadding="0" class="obj-con-table">
      <thead>
        <tr>
          <td>序号</td>
          <td>镜像名称</td>
          <td>操作系统</td>
          <td>系统版本</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(c, i) in tableData" :key="'course' + i">
          <td>{{i+1}}</td>
          <td>{{c.image_name}}</td>
          <td>{{c.opration_system}}</td>
          <td>{{c.version}}</td>
          <td>{{c.create_time}}</td>
          <td>
            <div><el-button @click="copyImage(c)" type="primary">复制</el-button></div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
    <copy-image :show="show" @onSubmit="handleSubmit" @onClose="handleReset" />
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { imageModel } from "../api/models";
import Searchbar from "@/components/Searchbar";
import openStatus from '@/common/is_open_status.js'
import goMixin from '@/mixins/goMixin.js'
import CopyImage from '../modals/CopyImage.vue';
import {Message} from "element-ui";
export default {
  mixins: [pageMixin, goMixin],
  components: { Searchbar, CopyImage},
  data() {
    return {
      tableData: [],
      total: 0,
      is_open_status: openStatus.status,
      search: {
        image_name: null,
        page: 1,
        page_size: 10,
        get_public: 1
      },
      loading: false,
      show: false,
      activeImage: {}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      console.log("getList");
      imageModel.list(
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            v.isOpenStat = v.is_open == 1 ? '是' : '否'
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    copyImage(image) {
      if (this.loading) return false
      this.show = true 
      this.activeImage = image
    },
    handleReset() {
      this.show = false
    },
        asyncImage() {
      this.$confirm('确定同步所有镜像？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        imageModel.AsyncImage({

        }, res => {
          Message.success(res.message);
          this.getList();
        }, err => {
          Message.error(err.message);
        })
      })
    },
    handleSubmit(name) {
      if (this.loading) return;
      this.loading = true
      this.handleReset()
      this.open()
      imageModel.create1({
        image_id: this.activeImage.id,
        image_name: name
      }, (res) => {
        this.loading = false
        if(res.data.instance_id) {
          this.$router.push('/image/create2/' + res.data.instance_id + '/' + this.activeImage.id + '?vnc=' + res.data.vnc + '&name=' + name)
        }
      },err => {
        this.loading = false
        console.log(err)
      })
    },
     open() {
        this.$notify.success({
          title: '制作镜像',
          message: '镜像正在复制中，请您耐心等待^_^',
          showClose: false
        });
      }
  }

};
</script>
<style lang="scss">
</style>